<template>
    <Return></Return>
    <div class="container">
        <div class="chart">
            <Charts></Charts>
        </div>
        <div class="bottomBox">
            <Table/>
        </div>
    </div>
</template>
<script setup>
import Return from '../../../components/Return.vue'
import Charts from '../../../components/ScoreBarCharts.vue'
import Table from '../../../components/GradeTable.vue'
</script>
<style scoped>
.container {
    width: 100%;
    height: 100%;
    padding: 4.6%;
    padding-top: 3.8%;
    background-color: rgba(255, 255, 255, 0.43);
    box-shadow: 0px 3px 6px 0px 
		rgba(0, 0, 0, 0.16);
}

.chart {
    width: 100%;
    height: 340px;
    margin-bottom: 40px;
}


.bottomBox {
    width: 100%;
}

.formBox {
    width: 100%;
    height: 90%;
}
.tableBox{
    border:1px solid #8a8a8a;
    border-right: 0px;
}

</style>
<style>
.scoreHeader {
    font-family: Source Han Sans CN;
    font-size: 1.13em;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #707070;
    background-color: #ffffff;
    border: solid 1px #8a8a8a;
}

.cellClass {
    background-color: #ffffff;
    border: solid 1px #8a8a8a;
}
.pagination{
    margin-top: 18px;
}
.vxe-pager.size--small{
    background-color: rgba(255, 255, 255, 0);
}
.vxe-pager .vxe-pager--wrapper{
    background-color: rgba(255, 255, 255, 0);
    
}
.vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active{
    background-color: #8493a6;
	border-radius: 6px;
    box-shadow: none;
    border: 0px;
}
.vxe-pager.is--background .vxe-pager--num-btn{
    background-color: #ffffff;
	border-radius: 6px;
	border: solid 1px #a19d9d;
    font-family: Source Han Sans CN;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #a19d9d;
}
.vxe-pager.is--background .vxe-pager--num-btn:hover{
    color: #8293a6;
    /* color: #ffffff; */
    box-shadow: none;
}
.vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active:hover{
    background-color: #8493a6 !important;
	border-radius: 6px;
}
.vxe-pager.is--background .vxe-pager--next-btn,
.vxe-pager.is--background .vxe-pager--prev-btn{
    background-color: #fff;
    color: #707070 !important;
    border: solid 1px #a19d9d !important;
    box-shadow: none !important;
    border-radius: 6px;
}
.vxe-pager.is--background .vxe-pager--prev-btn,
.vxe-pager.is--background .vxe-pager--next-btn:hover{
    color: #707070;
    font-family: Source Han Sans CN;
}
.vxe-select > .vxe-input .vxe-input--inner{
    border: solid 1px #a19d9d !important;
    font-family: Source Han Sans CN;
}
.vxe-select.is--active:not(.is--filter)>.vxe-input .vxe-input--inner{
    color: #707070;
    font-family: Source Han Sans CN;
}
.vxe-select-option.is--selected {
    font-weight: 700;
    color: #707070;
    font-family: Source Han Sans CN;
}
.vxe-pager .vxe-pager--jump .vxe-pager--goto{
    border: solid 1px #a19d9d !important;
    color: #707070;
    font-family: Source Han Sans CN;
}
</style>